<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="app.css"/>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="results.js"></script>
    <script type="text/javascript" src="words.js"></script>
</head>
<body>

<a href="https://plus.google.com/hangouts/_?gid=797920316256" style="text-decoration:none;">
    <img src="https://ssl.gstatic.com/s2/oz/images/stars/hangout/1/gplus-hangout-24x100-normal.png"
         alt="Start a Hangout"
         style="border:0;width:100px;height:24px;"/>
</a>

    <div id="mainDiv">
    <table id="mainTable">
        <tr>
            <td>
                <div id="timer"></div>
                <div id="board"></div>

                <input type="text" id="wordInput" onkeypress="return submitWord(event)"/>
                <div id="wordResult"></div>
            </td>
            <td>
                <div id="wordList"></div>
            </td>
        </tr>
    </table>
    </div>
    <div id="results" style="display:none"></div>
    <div id="startDiv" style="display:none">
        <input type="button" name="start" value="Start New Game" onclick="javascript:firstPlayerSetup()"/>
    </div>

    <script type="text/javascript">
        document.addEventListener('timerExpired', function() {
            testResults();
        });

        function firstPlayerSetup() {
            clearResults();

            letters = populateLetters();
            populateBoard();
            startTimer();
            displayBoard();
        }

        firstPlayerSetup();

        document.getElementById('startDiv').style.display = 'block';
    </script>
</body>
</html>